﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>致敬意 | 烈火英雄，不怕火浪滔天</title>

    <script src="js/jquery-3.0.0.min.js"></script>

    <style type="text/css">
        .barrager{width:800px;background:#fff;margin:0 auto;height:500px;overflow:hidden;position:relative;}
        .barrager div{position:absolute;}
        .addBarrager{border:1px solid #d5d5d5;height:75px;width:800px;margin:0 auto 30px;-webkit-border-radius: 20px;-moz-border-radius:20px;border-radius: 20px;}
        .addBarrager input{height:38px;margin-top:20px;margin-left:2%;width:70%;text-indent:30px;border:none;line-height:38px;font-size:20px;}
        .addBarrager .submit{height:38px;background:#fff;font-size:20px;font-family: "微软雅黑";width:25%;margin-top:20px;border-left:1px solid #d5d5d5;}

    </style>

</head>
<body>

    <div class="barrager">
        <div><span>和平年代的英雄，世界上最帅的“逆行”。</span></div>
        <div><span>致敬消防战士！</span></div>
        <div><span>感谢凯旋归去的英雄，心疼不能回家的英烈。</span></div>
        <div><span>愿他们一路走好！</span></div>
        <div><span>英雄的代价太过沉重，如果可以，我只想你好好活着。</span></div>
        <div><span>有人爱白色，有人爱绿色，而我，独爱这火焰蓝。</span></div>
        <div><span>英雄们一路走好，这世间还有我们来守护！</span></div>
        <div><span>感恩你们的付出，无以言表唯有深深的敬意。</span></div>
        <div><span>你们是我们心中不灭的英雄!向你们致敬!</span></div>
        <div><span>当下的岁月静好，是你们用生命换来的，愿逝者安息。</span></div>
        <div><span>人民英雄永垂不朽</span></div>
        <div><span>在光和火之中，有个身影在穿梭</span></div>
        <div><span> 冲天而起的漫漫硝烟中，到处是你冲锋陷阵的身影。</span></div>
    </div>

    <div class="addBarrager clearfix">
        <input type="text" maxlength="10" autocomplete="off" class="fl barVal" placeholder="写下你想对他们说的话吧">
        <button class="submit fr">留言</button>
    </div>
    <script type="text/javascript">
    $(function () {
        $(".barrager").barrager()
    });
    (function () {
        var Barrager = function (ele,options) {
            var defaults = {
                color:["#ff9999","#35d2f4","#9ee353","#9d77ff","#4785d9","#ff9333","#5bdea8","#51befc"],
                wrap:ele
            };
            this.settings = $.extend({},defaults,options||{});
            this._init();
            this.bindEven();
        };
        Barrager.prototype = {
            _init:function () {
                var item = $(this.settings.wrap).find("div");
                for(var i = 0;i<item.length;i++){
                    item.eq(i).css({
                        top:this.getReandomTop()+"px",
                        color:this.getReandomColor(),
                        fontSize:this.getReandomSize()+"px"
                    });
                    item.eq(i).css({
                        right:-item.eq(i).width()
                    })
                }
                this.randomTime(0);
            },
            bindEven:function () {
                var _this = this;
                $(".addBarrager .submit").on('click',function () {
                    _this._click(_this);
                });
            },
            getReandomColor:function () {
                var max = this.settings.color.length;
                var randomNum = Math.floor(Math.random()*max);
                return this.settings.color[randomNum];
            },
            getReandomTop:function () {
                var top = (Math.random()*450).toFixed(1);
                return top;
            },
            getReandomSize:function () {
                var size = (12+Math.random()*28);
                return size;
            },
            getReandomTime:function () {
                var time = Math.floor((8+Math.random()*10));
                return time*1000;
            },
            randomTime:function (n) {
                var obj = $(this.settings.wrap).find("div");
                var _this = this;
                var len = obj.length;
                if(n>=len){
                    n=0;
                }
                setTimeout(function () {
                    n++;
                    _this.randomTime(n)
                },1000);
                var item = obj.eq(n),_w = item.outerWidth(!0);
                item.animate({
                    left:-_w
                },_this.getReandomTime(),"linear",function () {
                    item.css({right:-_w,left:""});
                    _this.randomTime(n)
                });
            },
            _click:function (obj) {
                var _this = obj;
                var _val = $(".barVal");
                if(_val.val() == ""){
                    alert("请描述你对TA的印象！");
                    return false;
                }
                $(_this.settings.wrap).append("<div><span class='new'>"+_val.val()+"</span></div>");
                _this._init();
                _val.val("");
            }
        };
        $.fn.barrager = function (opt) {
            var bger = new Barrager(this,opt);
        }
    })(jQuery);
    </script>


</body>
</html>